<script lang="ts" setup>
import { ref, computed } from "vue";
import { useRouter } from "vue-router";
import store from "@/store";
// 导入图标工具
import { Bell } from "@/utils/icons.js";
// 导入消息工具
import message from "@/utils/message.js";

const router = useRouter();

// 模拟数据
const companyName = ref(store.state.gdepUserInfo.companyName || "企业用户");
const stats = ref([
    { title: "待处理简历", value: 12 },
    { title: "活跃职位", value: 5 },
    { title: "本周新增", value: 8 },
]);

const quickActions = ref([
    { text: "发布新职位", path: "/company/jobList" },
    { text: "查看简历", path: "/company/receivedResume" },
]);

const recentResumes = ref([
    { id: 1, name: "张三", job: "前端工程师", status: "待处理", time: "2025-05-12" },
    { id: 2, name: "李四", job: "UI设计师", status: "已查看", time: "2025-05-11" },
    { id: 3, name: "王五", job: "Java开发", status: "待处理", time: "2025-05-10" },
]);

// 新增模拟数据
const interviewDate = ref("2025-05-15");
const interviews = ref(["2025-05-15", "2025-05-20"]);
const growthRate = ref(15.32);
const unreadCount = ref(3);
const authStatus = ref({
    passed: false,
    type: "warning",
    text: "企业未认证",
});

const handleAction = (action: { path: string }) => {
    router.push({
        path: action.path,
    });
};

const hasInterview = (date: string) => {
    return interviews.value.includes(date);
};

const showInterviewDetail = (date: string) => {
    console.log("查看面试安排:", date);
};

const showNotifications = () => {
    console.log("显示通知中心");
};

const gotoAuth = () => {
    router.push({
        path: "/company/config",
    });
};
</script>

<template>
    <div class="company-dashboard">
        <!-- 顶部导航栏 -->
        <div class="header">
            <div class="logo-container">
                <img src="@/assets/img/weixin.png" alt="企业Logo" class="logo" />
                <h2>企业控制台</h2>
            </div>
            <div class="welcome">欢迎回来，{{ companyName }}</div>
        </div>

        <!-- 数据概览卡片 -->
        <div class="stats-cards">
            <el-card v-for="stat in stats" :key="stat.title" shadow="hover">
                <div class="card-content">
                    <div class="value">{{ stat.value }}</div>
                    <div class="title">{{ stat.title }}</div>
                </div>
            </el-card>
        </div>

        <!-- 快捷操作区 -->
        <div class="quick-actions">
            <el-button
                v-for="action in quickActions"
                :key="action.text"
                type="primary"
                @click="handleAction(action)"
                class="action-btn"
            >
                {{ action.text }}
            </el-button>
        </div>

        <!-- 企业认证状态 -->
        <div class="auth-status">
            <el-alert :type="authStatus.type" :title="authStatus.text" show-icon>
                <template #default>
                    <el-button v-if="!authStatus.passed" type="text" @click="gotoAuth"> 立即认证 </el-button>
                </template>
            </el-alert>
        </div>

        <!-- 数据统计和通知 -->
        <div class="stats-notification">
            <div class="growth-rate">
                <el-statistic title="月度简历增长率" :value="growthRate" :precision="2">
                    <template #suffix>%</template>
                </el-statistic>
            </div>
            <div class="notification">
                <el-badge :value="unreadCount" :max="99">
                    <el-button circle @click="showNotifications">
                        <el-icon><Bell /></el-icon>
                    </el-button>
                </el-badge>
            </div>
        </div>

        <!-- 最近简历区 -->
        <div class="recent-resumes">
            <h3>最新收到的简历</h3>
            <el-table :data="recentResumes" style="width: 100%">
                <el-table-column prop="name" label="姓名" width="120" />
                <el-table-column prop="job" label="应聘职位" />
                <el-table-column prop="status" label="状态" width="120">
                    <template #default="{ row }">
                        <el-tag :type="row.status === '待处理' ? 'warning' : 'success'">
                            {{ row.status }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="time" label="时间" width="120" />
            </el-table>
        </div>

        <!-- 面试日历 -->
        <div class="interview-calendar">
            <h3>面试安排</h3>
            <el-calendar v-model="interviewDate">
                <template #date-cell="{ data }">
                    <div v-if="hasInterview(data.day)" @click="showInterviewDetail(data.day)" class="interview-day">
                        {{ data.day.split("-")[2] }}
                    </div>
                </template>
            </el-calendar>
        </div>
    </div>
</template>

<style scoped>
.company-dashboard {
    padding: 20px;
    background-color: #f8fafc;
    min-height: 100vh;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e2e8f0;
}

.logo-container {
    display: flex;
    align-items: center;
    gap: 15px;
}

.logo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.stats-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 20px 0;
}

.card-content {
    text-align: center;
    padding: 20px 0;
}

.value {
    font-size: 28px;
    font-weight: bold;
    color: #1e3a8a;
    margin-bottom: 8px;
}

.title {
    color: #64748b;
}

.quick-actions {
    margin: 30px 0;
    display: flex;
    gap: 15px;
}

.action-btn {
    padding: 12px 24px;
}

.recent-resumes {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.recent-resumes h3,
.interview-calendar h3 {
    margin-bottom: 20px;
    color: #1e3a8a;
}

.auth-status {
    margin: 30px 0;
}

.stats-notification {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 30px 0;
    padding: 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.interview-calendar {
    margin-top: 30px;
    padding: 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.interview-day {
    width: 100%;
    height: 100%;
    background: #06b6d4;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    cursor: pointer;
}

.interview-day:hover {
    background: #0e7490;
}
</style>
